import React from 'react';
import { connect } from 'dva';
import { Form, Input, Modal, InputNumber, Select } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

const cacGmv = (uv, conversionRate, custPrice) => {
  const gmv = uv * conversionRate * custPrice;
  // 取小数据点后二位
  return gmv.toFixed(2);
};

const COMMON_COMMENTS = ['开店', '关店', '有促销活动', '有用户触达'];

@Form.create()
@connect(({ gmvConf, loading }) => ({
  gmvConf,
  loading: loading.models.gmvConf,
}))
class GmvSetForm extends React.Component {
  static defaultProps = {
    values: {
      id: 0,
    },
    modalVisible: false,
    handleOpt: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    const {
      values: { custPrice, uv, conversionRate, gmv },
    } = props;
    this.state = {
      gmv,
      conversionRate,
      uv,
      custPrice,
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const {
      dispatch,
      values: { id },
    } = this.props;
    dispatch({
      type: 'gmvConf/getById',
      payload: id,
    });
  }

  okHandle = () => {
    const {
      values: { id },
      form,
      handleOpt,
    } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleOpt({
        id,
        ...fieldsValue,
      });
    });
  };

  calculateGmvValue = () => {
    const { custPrice, uv, conversionRate } = this.state;
    const { form } = this.props;
    form.setFieldsValue({
      gmv: cacGmv(uv, conversionRate, custPrice),
    });
  };

  onCommonCommentsChange = val => {
    const { form } = this.props;
    form.setFieldsValue({ comments: val });
  };

  render() {
    const { modalVisible, handleModalVisible, values, form } = this.props;
    const { gmv, uv, custPrice, conversionRate } = this.state;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={440}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="修改GMV信息"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, values)}
        onOk={this.okHandle}
      >
        <div>
          <FormItem key="uv" {...this.formLayout} label="UV值">
            {form.getFieldDecorator('uv', {
              rules: [{ required: true, message: '请输入UV值！' }],
              initialValue: uv,
            })(
              <InputNumber
                style={{ width: '100%' }}
                placeholder="请输入"
                min={0}
                precision={0}
                step={1000}
                onChange={value => {
                  this.setState(
                    {
                      uv: value,
                    },
                    () => {
                      form.setFieldsValue({
                        uv: value,
                      });
                      this.calculateGmvValue();
                    }
                  );
                }}
              />
            )}
          </FormItem>

          <FormItem key="conversionRate" {...this.formLayout} label="转换率(%)">
            {form.getFieldDecorator('conversionRate', {
              initialValue: conversionRate,
              rules: [{ required: true, message: '请输入转换率！' }],
            })(
              <InputNumber
                style={{ width: '100%' }}
                placeholder="请输入"
                min={0}
                precision={2}
                step={0.01}
                onChange={value => {
                  this.setState(
                    {
                      conversionRate: value,
                    },
                    () => {
                      form.setFieldsValue({
                        conversionRate: value,
                      });
                      this.calculateGmvValue();
                    }
                  );
                }}
              />
            )}
          </FormItem>
          <FormItem key="custPrice" {...this.formLayout} label="客单价(元)">
            {form.getFieldDecorator('custPrice', {
              initialValue: custPrice,
              rules: [{ required: true, message: '请输入客单价！' }],
            })(
              <InputNumber
                style={{ width: '100%' }}
                placeholder="请输入"
                min={0}
                precision={2}
                step={0.01}
                onChange={value => {
                  this.setState(
                    {
                      custPrice: value,
                    },
                    () => {
                      form.setFieldsValue({
                        custPrice: value,
                      });
                      this.calculateGmvValue();
                    }
                  );
                }}
              />
            )}
          </FormItem>
          <FormItem key="gmv" {...this.formLayout} label="GMV值">
            {form.getFieldDecorator('gmv', {
              initialValue: gmv,
            })(<Input disabled placeholder="请输入" suffix="元" />)}
          </FormItem>

          <FormItem key="commonComments" {...this.formLayout} label="选择便捷理由">
            <Select
              onChange={this.onCommonCommentsChange}
              placeholder="选择便捷理由"
              style={{ width: '100%' }}
              allowClear
            >
              {COMMON_COMMENTS.map(item => (
                <Select.Option value={item} key={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </FormItem>
          <FormItem key="comments" {...this.formLayout} label="备注">
            {form.getFieldDecorator('comments', {
              initialValue: values.comments,
            })(<TextArea placeholder="请输入" />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default GmvSetForm;
